<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org" lang="">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <!-- 头部-->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
        <!-- 按钮-->
            <button type="button" class="btn btn-primary">添加</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>


    <!-- 列表-->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <tr>
                    <td>ID</td>
                    <td>类别</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>折扣价</td>
                    <td>卖点</td>
                    <td>图片</td>
                    <td>库存</td>
                    <td>创建时间</td>
                    <td>修改时间</td>
                    <td>操作</td>
                </tr>
                <tr th:each="product : ${list}">
                    <td th:text="${product.id}"></td>
                    <td th:text="${product.typeName}"></td>
                    <td th:text="${product.name}"></td>
                    <td th:text="${product.price}"></td>
                    <td th:text="${product.salePrice}"></td>
                    <td th:text="${product.salePoint}"></td>
                    <td th:text="${product.image}"></td>
                    <td th:text="${product.stock}"></td>
                    <td th:text="${product.createTime}"></td>
                    <td th:text="${product.updateTime}"></td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm">修改</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </td>
                </tr>
            </table>
        </div>

        <!-- 信息-->
        <div class="col-md-6">
            当前第几页、共几条记录，共几页
        </div>

        <!-- 工具-->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>


</div>


</body>
</html>